<%--
  Created by IntelliJ IDEA.
  User: 14811
  Date: 2022-4-15
  Time: 14:33
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<% String path = request.getContextPath();%>
<html>
<head>
    <title>Title</title>
    <style>
        .file-preview{
            height: 350px;
            width: 620px;
        }
        .file-drop-zone{
            height: 330px;

        }
        .file-caption-main {
            width: 600px;
        }
        .krajee-default.file-preview-frame {
            position: relative;
            display: table;
            margin: 8px;
            border: 1px solid #ddd;
            box-shadow: 1px 1px 5px 0 #a2958a;
            padding: 6px;
            float: left;
            text-align: center;
            width: 550px;
            height: 300px;
        }
        .file-thumbnail-footer{
            margin-bottom: 0;
        }

    </style>
    <script>
        $(function () {
            $('#rimage').fileinput({
                language: 'zh',
                uploadUrl: "<%=path%>/file/upLoadFileInput",
                browseClass: 'btn btn-primary',
                maxFileCount: 1,//最多支持上传的个数
                enctype: 'multipart/form-data',
                showRemove: false,
                maxFileSize: 1024, //单位为kb, 如果为0表示不限制文件大小
                allowedFileExtensions: ['jpg', 'gif', 'png'],
                initialPreviewAsData: true, // 是否初始化预览图片
                initialPreviewFileType: 'image', //回显文件的类型(初始化预览图片类型)
                //img/product/small/eacd6271-174b-4a02-90ca-6de3b2027fea.jpg //图片地址
                initialPreview: "<%=path%>/file/download?filename=${changeImg.paddress}",
                previewSettings: {
                    image: {width: "550px", height: "260px"},
                }
            });
            $("#rimage").on("fileuploaded", function(event, data, previewId, index){
                $("#eimg").val(data.response.filePath+data.response.imgUrl);
            })

            $("#rimage").fileinput('_initFileActions');//这行代码就是调用绑定删除事件的
        })
    </script>
</head>
<body>
    <form class="form-horizontal" role="form" id="updateCarousel">
        <input type="hidden" value="${changeImg.pid}" name="pid">
        <div class="form-group">
            <label for="pname" class="col-sm-2 control-label">轮播图名称</label>
            <div class="col-sm-4">
                <input type="text" value="${changeImg.pname}" class="form-control" id="pname" name="pname" placeholder="请输入名称">
            </div>
        </div>

        <div class="form-group">
            <label for="rimage" class="col-sm-2 control-label">原轮播图</label>
            <div class="col-sm-4">
                <img src="${pageContext.request.contextPath}/file/download?filename=${changeImg.paddress}" height="30px" width="30px"/>
            </div>
        </div>

        <div class="form-group">
            <label for="rimage" class="col-sm-2 control-label">轮播图上传</label>
            <div class="col-sm-4">
                <input type="file" multiple class="form-control" name="myFile" id="rimage">
                <input type="hidden" name="paddress" id="eimg">
            </div>
        </div>


        <div class="form-group">
            <label for="starttime" class="col-sm-2 control-label">广告开始时间</label>
            <div class="col-sm-4">
                <input type="date" value="<fmt:formatDate value='${changeImg.starttime}' pattern='yyyy-MM-dd'/>" class="form-control" id="starttime" name="starttime">
            </div>
        </div>

        <div class="form-group">
            <label for="endtime" class="col-sm-2 control-label">广告结束时间</label>
            <div class="col-sm-4">
                <input type="date" value="<fmt:formatDate value='${changeImg.endtime}' pattern='yyyy-MM-dd'/>" class="form-control" id="endtime" name="endtime">
            </div>
        </div>

        <div class="form-group">
            <label for="count" class="col-sm-2 control-label">广告排序值</label>
            <div class="col-sm-4">
                <input type="text" class="form-control" value="${changeImg.count}" id="count" name="count">
            </div>
        </div>

</form>
</body>
</html>
